<template>
  <div class="container">
    <div class="page-one">
      <div ref="outside" style="background: #181818; width: 98%; padding: 8px" :style="outsideStyle">
        <div ref="content-img" style="width: 100%; height: 100%; background: #333333" :style="contentImgStyle">
          <el-image :src="imgTest" style="width: 100%; height: 100%" fit="fill" />
        </div>
      </div>
    </div>
    <div style="width: 40%; background: white; border-radius: 10px"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import imgTest from '@/assets/test.png'

interface Config {
  width: number
  height: number
  shape: string
}

const outside = ref()
const defaultSize = { width: 466, height: 466 }
const outsideStyle = ref({ height: '1080px', maxWidth: '466px', borderRadius: '16px' })
const contentImgStyle = ref({ borderRadius: '16px' })

// 平板
const CONFIG_PAG: Config = { width: 1920, height: 1080, shape: 'square' }
// 圆盘手表
const CONFIG_WATCH_CIRCLE: Config = { width: 466, height: 466, shape: 'circle' }
// 方形手表
const CONFIG_WATCH: Config = { width: 466, height: 466, shape: 'square' }


onMounted(() => {
  updateOutsideStyle(CONFIG_WATCH_CIRCLE)

  const resizeObserver = new ResizeObserver((entries) => {
    updateOutsideStyle(CONFIG_WATCH_CIRCLE)
  })
  resizeObserver.observe(outside.value)
})

const updateOutsideStyle = (config: Config) => {
  defaultSize.width = config.width
  defaultSize.height = config.height

  outsideStyle.value.maxWidth = `${config.width}px`
  const borderRadius = config.shape === 'circle' ? config.width / 2 : 16
  outsideStyle.value.borderRadius = `${borderRadius}px`
  contentImgStyle.value.borderRadius = `${borderRadius}px`

  const width = outside.value.clientWidth
  const height = (width / defaultSize.width) * defaultSize.height
  outsideStyle.value.height = height + 'px'
}
</script>

<style scoped>
.container {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  display: flex;
  gap: 20px;
}

.page-one {
  width: 60%;
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
